---
title: Using Svelte
description: Easily use Panda with Svelte with our dedicated integration.
---

This guide will show you how to set up Panda CSS in a Svelte project using PostCSS.

## Start a new project

<Steps>

### Create Svelte project

To get started, we will need to create a new Svelte project.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm create svelte@latest test-app
    ```
  </Tab>
  <Tab>
    ```bash
    npm create svelte@latest test-app
    ```
  </Tab>
  <Tab>
    ```bash
    yarn create svelte@latest test-app
    ```
  </Tab>
  <Tab>
    ```bash
    bun create svelte@latest test-app
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

You will be asked a few questions, answer them as follows:

```sh
┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  ◼ Add ESLint for code linting
│  ◼ Add Prettier for code formatting
│  ◻ Add Playwright for browser testing
│  ◻ Add Vitest for unit testing
│
└  Your project is ready!
```

Enter the newly created directory and install the dependencies.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    cd test-app
    pnpm install
    ```
  </Tab>
  <Tab>
    ```bash
    cd test-app
    npm install
    ```
  </Tab>
  <Tab>
    ```bash
    cd test-app
    yarn
    ```
  </Tab>
  <Tab>
    ```bash
    cd test-app
    bun install
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Install Panda

To install Panda and corresponding dependencies run the following commands:

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm install -D @pandacss/dev
    pnpm panda init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @pandacss/dev
    npx panda init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @pandacss/dev
    yarn panda init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @pandacss/dev
    bun panda init --postcss
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Update package.json scripts

Open your `package.json` file and update the `scripts` section as follows:

```json {3}
{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write ."
  }
}
```

This `"prepare"` script will run Panda CSS CLI codegen before each build. Read more about
[codegen](/docs/references/cli#panda-codegen) in the CLI section.

> This step ensures that the panda output directory is regenerated after each dependency installation. So you can add
> the output directory to your `.gitignore` file and not worry about it.

### Configure the content

Make sure that all of the paths of your Svelte components are included in the `include` section of the `panda.config.ts`
file.

```js {8} filename="panda.config.ts"
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ['./src/**/*.{js,ts,svelte}'],

  // Files to exclude
  exclude: [],

  // The output directory for your css system
  outdir: 'styled-system'
})
```

### Update Svelte config

To configure Svelte preprocess to use PostCSS and add Panda alias update the `svelte.config.js` file as follows:

```js {15} filename="svelte.config.js"
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [vitePreprocess()],
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
    alias: {
      'styled-system': './styled-system/*'
    }
  }
}

export default config
```

### Update Vite config

To be able to import `styled-system` files in your Svelte components you will need to update the `vite.config.js` file
as follows:

```js {6-10} filename="vite.config.js"
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    fs: {
      allow: ['styled-system']
    }
  }
})
```

If you’re using Storybook for a SvelteKit project, you need to replicate the same Vite server config changes. In your
.storybook folder, you likely have a `main.js` (or `vite.config.js` in older Storybook versions). Update it as follows:

```js filename="main.js"
import { defineConfig, mergeConfig } from 'vite'

/** @type { import('@storybook/sveltekit').StorybookConfig } */

const config = {
  // other Storybook config...
  viteFinal: async config => {
    return mergeConfig(
      config,
      defineConfig({
        server: {
          fs: {
            allow: ['styled-system']
          }
        }
      })
    )
  }
}
export default config
```

### Configure the entry CSS with layers

Create the `app.css` file in the `src` directory and add the following content:

```css filename="src/app.css"
@layer reset, base, tokens, recipes, utilities;
```

### Import styles in the layout file

Create the `src/routes/+layout.svelte` file and add the following content:

```svelte {2} filename="src/routes/+layout.svelte"
<script>
  import '../app.css'
</script>

<slot />
```

### Start your build process

Run the following command to start your development server.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm dev
    ```
  </Tab>
  <Tab>
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab>
    ```bash
    yarn dev
    ```
  </Tab>
  <Tab>
    ```bash
    bun dev
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Start using Panda

Now you can start using Panda CSS in your project. Here is the snippet of code that you can use in your
`src/routes/+page.svelte` file.

```svelte filename="src/routes/+page.svelte"
<script>
	import { css } from 'styled-system/css'
</script>

<div class={css({ fontSize: '2xl',	fontWeight: 'bold' })}>
	Hello 🐼!
</div>
```

</Steps>

## Troubleshooting

### Autocomplete not working

If you're not getting import autocomplete in your IDE, you may need to include the `styled-system` directory in your
TypeScript config. However, in Svelte your main `tsconfig.json` file is extending the autogenerated one. To extend it
without overriding the defaults adjust your `svelte.config.js` to include following entry:

```js filename="svelte.config.js"
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // ...
  kit: {
    // ...
    typescript: {
      config: config => {
        config.include.push('../styled-system')
        return config
      }
    }
  }
}

export default config
```
